<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>看板清单SOP (时间管理)</title>
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- JS 库将移到 body 底部 -->
    
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;700&family=Source+Han+Sans+CN:wght@300;400;700&display=swap" rel="stylesheet">
    
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#3B82F6', // 蓝色
                        danger: '#EF4444', // 红色
                        'light-blue-bg': '#EFF6FF',
                        'dark-blue-text': '#1E40AF',
                        'icon-blue': '#60A5FA',
                        'icon-green': '#34D399',
                        'icon-purple': '#A78BFA',
                        'icon-orange': '#F59E0B',
                        'col-bg': '#f4f5f7', // 看板列的背景色
                    }
                }
            }
        }
    </script>
    <style>
        /* 复用SaaS风格 */
        body {
            font-family: 'Source Han Sans CN', sans-serif;
            font-weight: 300;
            background-color: #f3f4f6;
        }
        h1, h2, h3, blockquote {
            font-family: 'Noto Serif SC', serif;
        }

        .tool-container {
            width: 1400px; /* 看板需要更宽 */
            max-width: 90vw;
            background: #ffffff;
            border-radius: 12px;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            margin: 40px auto;
            padding: 40px;
        }
        
        /* 导出按钮样式 */
        .export-btn {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: white;
            border: none;
            padding: 12px 28px;
            font-size: 1.0em;
            font-weight: 700;
            border-radius: 8px;
            cursor: pointer;
            transition: opacity 0.3s, transform 0.2s;
            font-family: 'Source Han Sans CN', sans-serif;
            text-decoration: none;
        }
        .btn-pdf { background-color: #EF4444; }
        .btn-pdf:hover { opacity: 0.85; transform: translateY(-1px); }
        .btn-doc { background-color: #3B82F6; margin-left: 16px; }
        .btn-doc:hover { opacity: 0.85; transform: translateY(-1px); }
        .export-btn.loading { background-color: #9ca3af; cursor: wait; }

        /* 看板特定样式 */
        .kanban-board {
            display: grid;
            grid-template-columns: repeat(2, 1fr); /* 2列布局 */
            gap: 20px;
        }
        
        .kanban-column {
            background-color: var(--col-bg, #f4f5f7);
            border-radius: 8px;
            padding: 16px;
        }
        
        .column-header {
            display: flex;
            align-items: center;
            font-size: 1.2em;
            font-weight: 700;
            font-family: 'Noto Serif SC', serif;
            margin-bottom: 16px;
            padding-bottom: 16px;
            border-bottom: 2px solid #e0e0e0;
        }
        
        .editable-box {
            width: 100%;
            min-height: 400px;
            padding: 12px;
            border: 1px solid #e0e0e0;
            border-radius: 6px;
            background-color: #ffffff; /* 白色背景 */
            font-size: 14px;
            line-height: 1.7;
            cursor: text;
        }
        .editable-box:focus {
            outline: 2px solid var(--theme-primary);
            border-color: var(--theme-primary);
        }
        .editable-box:empty:before {
            /* 修复：使用英文提示语，避免乱码 */
            content: "Click here to enter tasks... \A (e.g., - Task 1 \A - Task 2)";
            color: #aaa;
            font-style: italic;
            white-space: pre-line;
        }
        
        /* 修复：为“已取消”框添加删除线样式 */
        #task-list-canceled {
            text-decoration: line-through;
            color: #9ca3af; /* text-gray-400 */
        }
        #task-list-canceled:empty:before {
            color: #ccc; /* 占位符颜色也浅一点 */
        }
        
        @media print {
            .no-print { display: none; }
        }
        
    </style>
</head>
<body class="bg-gray-100">

    <div class="tool-container" id="kanban-export-area">

        <!-- 页面头部 -->
        <header class="mb-8 no-print"> 
            <h1 class="text-3xl font-bold text-gray-800">看板清单SOP (时间管理)</h1>
            <p class="text-lg text-gray-500 mt-2">为什么精英都是清单控？</p>
        </header>

        <!-- 方法简介 -->
        <div class="bg-light-blue-bg border-l-4 border-primary p-6 rounded-lg my-6 no-print">
            <h3 class="font-bold text-lg text-dark-blue-text">方法简介</h3>
            <p class="text-gray-700 mt-2">
                “看板清单”是一种强大的视觉管理工具。它将您的所有任务分为“计划做”、“正在做”、“已完成”和“已取消”四个状态，让您对项目进度一目了然。
            </p>
        </div>

        <!-- 导出按钮区域 -->
        <div class="my-8 text-left no-print">
            <button class="export-btn btn-pdf" id="pdf-button">
                <span>导出为PDF</span>
            </button>
            <a href="#" class="export-btn btn-doc" id="doc-button">
                <span>导出为文档</span>
            </a>
        </div>

        <!-- 移除了 "添加新任务" 模块 -->

        <!-- 在线填写区域 -->
        <section id="kanban-content" class="kanban-board border-t border-gray-200 pt-8">
            
            <!-- 1. 计划做 -->
            <div class="kanban-column" id="col-todo" data-column-name="Plan to do (计划做)">
                <div class="column-header" style="color: #3B82F6;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M15 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V7Z"></path><path d="M14 2v4a2 2 0 0 0 2 2h4"></path><path d="M10 9H8"></path><path d="M16 13H8"></path><path d="M16 17H8"></path></svg>
                    Plan to do (计划做)
                </div>
                <div class="editable-box" id="task-list-todo" contenteditable="true"></div>
            </div>

            <!-- 2. 正在做 -->
            <div class="kanban-column" id="col-doing" data-column-name="Doing (正在做)">
                <div class="column-header" style="color: #F59E0B;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><polygon points="12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2"></polygon></svg>
                    Doing (正在做)
                </div>
                <div class="editable-box" id="task-list-doing" contenteditable="true"></div>
            </div>

            <!-- 3. 已完成 -->
            <div class="kanban-column" id="col-completed" data-column-name="Completed (已完成)">
                <div class="column-header" style="color: #10B981;">
                     <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
                    Completed (已完成)
                </div>
                <div class="editable-box" id="task-list-completed" contenteditable="true"></div>
            </div>

            <!-- 4. 已取消 -->
            <div class="kanban-column" id="col-canceled" data-column-name="Canceled (已取消)">
                <div class="column-header" style="color: #EF4444;">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg>
                    Canceled (已取消)
                </div>
                <div class="editable-box" id="task-list-canceled" contenteditable="true"></div>
            </div>

        </section>
        
        <!-- 使用提示 -->
        <div class="bg-yellow-50 border border-yellow-200 p-6 rounded-lg my-8 no-print">
            <h3 class="font-bold text-lg text-yellow-800 flex items-center">
                <span class="mr-2 text-yellow-600">
                    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15 14c.2-1 .7-1.7 1.5-2.5 1-.9 1.5-2.2 1.5-3.5A6 6 0 0 0 6 8c0 1.3.5 2.6 1.5 3.5.7.8 1.3 1.5 1.5 2.5"></path><path d="M9 18h6"></path><path d="M10 22h4"></path></svg>
                </span>
                使用提示
            </h3>
            <ul class="list-disc pl-10 mt-4 text-gray-700 space-y-2">
                <li>您现在可以直接点击任意状态框，在框内输入您的任务列表。</li>
                <li>您可以通过复制粘贴，在不同状态框之间移动任务。</li>
                <li>“导出PDF”将保存您看板的当前快照。</li>
                <li>“导出文档”会将所有任务按状态分类，生成一个可编辑的列表。</li>
            </ul>
        </div>
        
        <!-- 页脚 -->
        <div class="flex items-center text-green-600 mt-8 pt-6 border-t border-gray-200 dark:border-gray-700 no-print">
            <span class="mr-2">
                <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg>
            </span>
            <span>看板清单SOP · 职场观察者知识库工具</span>
        </div>
        <div class="h-16 no-print"></div> <!-- 底部留白 -->
        
    </div> <!-- .tool-container end -->

    <!-- JS 库 -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.1/html2canvas.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.5.1/jspdf.umd.min.js"></script>
    <script src="https://unpkg.com/lucide@latest"></script> <!-- 把 lucide 移到最后 -->

    <script>
        window.onload = function() {
            try {
                // --- 1. 图标加载 ---
                try {
                    if (typeof lucide !== 'undefined') {
                        document.getElementById('pdf-button').innerHTML = '<i data-lucide="file-text" class="inline-block w-5 h-5 mr-2"></i> 导出为PDF';
                        document.getElementById('doc-button').innerHTML = '<i data-lucide="file-text" class="inline-block w-5 h-5 mr-2"></i> 导出为文档';
                        lucide.createIcons();
                    } else {
                        // 备用文本
                        document.getElementById('pdf-button').innerHTML = '导出为PDF';
                        document.getElementById('doc-button').innerHTML = '导出为文档';
                    }
                } catch(e) { console.error('Icon init failed:', e); }

                // --- 2. PDF 生成功能 ---
                const pdfButton = document.getElementById('pdf-button');
                if (pdfButton) {
                    pdfButton.addEventListener('click', async function() {
                        if (typeof html2canvas === 'undefined' || typeof window.jspdf === 'undefined') {
                            alert("PDF生成库加载失败，请检查网络连接并刷新页面。");
                            return;
                        }
                        const { jsPDF } = window.jspdf;
                        const button = this;
                        const exportArea = document.getElementById('kanban-export-area'); 
                        const title = '我的看板清单';

                        button.classList.add('loading');
                        button.innerHTML = '<span><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline-block w-5 h-5 mr-2 animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg> 正在生成PDF...</span>';
                        
                        window.scrollTo(0, 0);

                        try {
                            const canvas = await html2canvas(exportArea, {
                                scale: 2,
                                useCORS: true,
                                onclone: (doc) => {
                                    doc.querySelectorAll('.no-print').forEach(el => el.style.display = 'none');
                                    doc.querySelectorAll('.editable-box:empty:before').forEach(el => el.style.display = 'none');
                                }
                            });
                            
                            const imgData = canvas.toDataURL('image/png');
                            const pdfWidth = 841.89; // A4 横向
                            const pdfHeight = (canvas.height * pdfWidth) / canvas.width;
                            
                            const pdf = new jsPDF({
                                orientation: 'landscape',
                                unit: 'pt',
                                format: [pdfWidth, pdfHeight]
                            });
                            pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
                            pdf.save(`${title}.pdf`);

                        } catch (err) {
                            console.error('生成PDF失败: ', err);
                            alert("生成PDF失败，请重试。");
                        } finally {
                            button.classList.remove('loading');
                            button.innerHTML = '<span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 inline-block"><path d="M14 2v6h6"></path><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M10 13v-1h4v1"></path><path d="M10 18h4"></path><path d="M10 15h4"></path></svg> 导出为PDF</span>';
                        }
                    });
                }

                // --- 3. 导出Word文档功能 ---
                const docButton = document.getElementById('doc-button');
                if (docButton) {
                    let isDocFileReady = false;
                    docButton.addEventListener('click', function(e) {
                        if (isDocFileReady) {
                            isDocFileReady = false;
                            setTimeout(() => {
                                this.classList.remove('loading');
                                this.innerHTML = '<span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 inline-block"><path d="M14 2v6h6"></path><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M10 13v-1h4v1"></path><path d="M10 18h4"></path><path d="M10 15h4"></path></svg> 导出为文档</span>';
                            }, 1000);
                            return; 
                        }

                        e.preventDefault(); 
                        this.classList.add('loading');
                        this.innerHTML = '<span><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline-block w-5 h-5 mr-2 animate-spin"><path d="M21 12a9 9 0 1 1-6.219-8.56"></path></svg> 正在生成文档...</span>';

                        setTimeout(() => {
                            try {
                                let docContent = "";
                                const h1Style = "font-family: 'Noto Serif SC', serif; color: #333; text-align: left; font-size: 1.8em; font-weight: 700; margin-bottom: 24px; border-bottom: 2px solid #f0f0f0; padding-bottom: 10px;";
                                const h2Style = "font-family: 'Noto Serif SC', serif; font-size: 1.25em; font-weight: 700; color: #3B82F6; margin-bottom: 12px;";
                                const boxStyle = "padding: 12px; border: 1px solid #e0e0e0; border-radius: 6px; background-color: #f9f9f9; font-size: 14px; min-height: 400px; font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif; vertical-align: top;";

                                // 读取 editable-box 的 innerHTML
                                const todoContent = document.getElementById('task-list-todo').innerHTML;
                                const doingContent = document.getElementById('task-list-doing').innerHTML;
                                const completedContent = document.getElementById('task-list-completed').innerHTML;
                                const canceledContent = document.getElementById('task-list-canceled').innerHTML;

                                docContent += `<h1 style="${h1Style}">看板清单任务导出</h1>`;
                                
                                // 使用表格实现2x2布局
                                docContent += `<table style="width: 100%; border-collapse: separate; border-spacing: 20px;">`;
                                docContent += `
                                    <tr>
                                        <td style="width: 50%; vertical-align: top;">
                                            <h2 style="${h2Style.replace('#3B82F6', '#3B82F6')}">Plan to do (计划做)</h2>
                                            <div style="${boxStyle}">${todoContent || '&nbsp;'}</div>
                                        </td>
                                        <td style="width: 50%; vertical-align: top;">
                                            <h2 style="${h2Style.replace('#3B82F6', '#F59E0B')}">Doing (正在做)</h2>
                                            <div style="${boxStyle}">${doingContent || '&nbsp;'}</div>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td style="width: 50%; vertical-align: top;">
                                            <h2 style="${h2Style.replace('#3B82F6', '#10B981')}">Completed (已完成)</h2>
                                            <div style="${boxStyle}">${completedContent || '&nbsp;'}</div>
                                        </td>
                                        <td style="width: 50%; vertical-align: top;">
                                            <h2 style="${h2Style.replace('#3B82F6', '#EF4444')}">Canceled (已取消)</h2>
                                            <!-- Doc 修复：为取消的框添加删除线 -->
                                            <div style="${boxStyle} text-decoration: line-through; color: #9ca3af;">${canceledContent || '&nbsp;'}</div>
                                        </td>
                                    </tr>
                                </table>`;

                                const wordHtmlContent = `<div style="font-family: 'Source Han Sans CN', 'Microsoft YaHei', sans-serif; margin: 30px; max-width: 900px;">${docContent}</div>`;
                                const fullHtml = `<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>看板清单</title></head><body>${wordHtmlContent}</body></html>`;
                                const dataUri = 'data:application/vnd.ms-word;base64,' + btoa(unescape(encodeURIComponent(fullHtml)));
                                
                                this.href = dataUri;
                                this.download = '看板清单.doc';
                                
                                this.classList.remove('loading');
                                this.innerHTML = '<span><svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="inline-block w-5 h-5 mr-2"><path d="M22 11.08V12a10 10 0 1 1-5.93-9.14"></path><polyline points="22 4 12 14.01 9 11.01"></polyline></svg> 已就绪, 请再次点击下载</span>';
                                
                                isDocFileReady = true;

                            } catch (err) {
                                console.error("生成Word失败:", err);
                                alert("生成文档失败，请重试。");
                                this.classList.remove('loading');
                                this.innerHTML = '<span><svg xmlns="http://www.w3.org/2000/svg" width="18" height="18" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="mr-2 inline-block"><path d="M14 2v6h6"></path><path d="M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z"></path><path d="M10 13v-1h4v1"></path><path d="M10 18h4"></path><path d="M10 15h4"></path></svg> 导出为文档</span>';
                            }
                        }, 100);
                    });
                }
                
            } catch (e) {
                console.error("A fatal error occurred during initialization:", e);
            }
        }
    </script>
</body>
</html>

